<template>
  <div class="box">
    <!-- banner的盒子 -->
    <div id="banner">
      <!-- 轮播图插件 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item,index) in banner" :key="index">
          <img :src="item.picUrl" />
        </van-swipe-item>
      </van-swipe>
      <div class="icons">
        <div class="icons-item">
          <van-icon name="like" size="30" />
          <p>签到</p>
        </div>
        <div class="icons-item">
          <van-icon name="gift" size="30" />
          <p>礼券</p>
        </div>
        <div class="icons-item">
          <van-icon name="coupon" size="30" />
          <p>砍价</p>
        </div>
        <div class="icons-item">
          <van-icon name="label" size="30" />
          <p>专栏</p>
        </div>
      </div>
    </div>

    <!-- 砍价区域 -->
    <div id="cut">
      <div class="cut-hade">
        <span>全民砍价</span>
        <van-icon name="arrow" />
      </div>
      <!-- 父传子组件通讯 -->
      <Cut :cutList="cutList" />
    </div>
    <!-- 精选专题 -->
    <div id="article">
      <div class="article-hade">
        <span>精选专题</span>
        <van-icon name="arrow" />
      </div>
      <div class="articel-list">
        <ul>
          <li v-for="(item,index) in articleList" :key="index">
            <img :src="item.pic" />
            <p v-html="item.title"></p>
            <p v-html="item.descript"></p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div id="recommend">
      <div class="r-head">
        <span>人气推荐</span>
        <van-icon name="arrow" />
      </div>
      <Tuijian :goodsList="goodsList" />
    </div>
  </div>
</template>

<script>
//第一步导入import组件
import Cut from "@/zujianchaifen/kanjia.vue";
import Tuijian from "@/zujianchaifen/tuijian.vue";
export default {
  name: "",
  data() {
    return {
      banner: [],
      cutList: [],
      articleList: [],
      goodsList: []
    };
  },
  components: {
    //第二步注册一下组件
    Cut,
    Tuijian
  },
  methods: {
    //获取轮播的列表
    getBanners() {
      this.$axios({
        url: "banner/list"
      }).then(res => {
        // console.log(res);
        this.banner = res.data;
      });
    },
    //获取砍价的列表
    getCutlist() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/kanjia/list"
      }).then(res => {
        // console.log(res);
        let ids = Object.keys(res.data.goodsMap).splice(-4);
        ids.forEach(item => {
          this.cutList.push(res.data.goodsMap[item]);
        });
      });
    },
    //获取文章列表
    getArticleList() {
      this.$axios({
        url: "https://api.it120.cc/small4/cms/news/list"
      }).then(res => {
        // console.log(res);
        this.articleList = res.data;
      });
    },
    //获取人气推荐列表
    getGoodList() {
      this.$axios({
        url: "https://api.it120.cc/small4/shop/goods/list"
      }).then(res => {
        // console.log(res);
        let data = res.data.filter(item => {
          return item.name.indexOf("测试") == -1;
        });
        this.goodsList = data.slice(-6);
      });
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getBanners();
    this.getArticleList();
    this.getCutlist();
    this.getGoodList();
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  background: rgb(240, 240, 240);
  padding-bottom: 1rem;
  #banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    .icons {
      width: 100%;
      height: 2rem;
      background: #fff;
      position: absolute;
      bottom: 0px;
      display: flex;
      justify-content: space-around;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      align-items: center;
      p {
        text-align: center;
        margin-top: 0.2rem;
        font-size: 0.4rem;
      }
    }
  }
  #cut {
    width: 100%;
    background: #fff; //背景颜色
    margin-top: 0.25rem; //距离上面0.25rem
    .cut-hade {
      line-height: 0.88rem;
      text-align: center; //居中
      font-size: 0.35rem;
      border-bottom: #dddddd 1px solid; //下划线
    }
    .cut-list {
      width: 100%;
      padding: 0.2rem;
      box-sizing: border-box; //块级的盒子模型
      .cut-item {
        width: 100%;
        display: flex;
        border-bottom: #dddddd 1px solid; //下划线
        div:nth-of-type(1) {
          width: 40%;
          img {
            width: 100%;
          }
        }
        div:nth-of-type(2) {
          width: 65%;
          margin-left: 5%;
          p:nth-of-type(1) {
            line-height: 0.65rem;
            font-size: 0.35rem;
          }
          p:nth-of-type(2) {
            line-height: 0.6rem;
            font-size: 0.25rem;
            color: #505050;
          }
          .cut-price {
            width: 100%;
            display: flex;
            margin-top: 0.3rem;
            div {
              width: 30%;
              text-align: center;
            }
          }
        }
      }
    }
  }
  //精选专题
  #article {
    width: 100%;
    background: #fff;
    margin-top: 0.2rem;
    .article-hade {
      line-height: 0.88rem;
      text-align: center;
      font-size: 0.35rem;
      border-bottom: #dddddd 1px solid;
    }
    .articel-list {
      width: 100%;
      overflow: auto;
      height: 4rem;
      padding: 0.2rem;
      box-sizing: border-box;
      ul {
        width: 26rem;
        display: flex;
        li {
          width: 5rem;
          height: 3rem;
          margin-left: 0.12rem;
          img {
            width: 100%;
            height: 3rem;
          }
          p {
            width: 100%;
            line-height: 0.6rem;
            overflow: hidden; //显示隐藏
            text-overflow: ellipsis;
            white-space: nowrap; //强制不换行
          }
          p:nth-of-type(1) {
            font-size: 0.4rem;
          }
          p:nth-of-type(2) {
            font-size: 0.3rem;
            color: #808080;
          }
        }
      }
    }
  }
  //人气推荐的样式
  #recommend {
    width: 100%;
    background: #fff;
    margin-top: 0.2rem;
    .r-head {
      line-height: 0.88rem;
      text-align: center;
      font-size: 0.35rem;
      border-bottom: #dddddd 1px solid;
    }
    .goods-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .goods-item {
        width: 48%;
        margin: 1%;
        box-sizing: border-box;
        img {
          width: 100%;
        }
        p {
          font-size: 0.35rem;
          width: 100%;
          line-height: 0.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        p:nth-of-type(3) {
          color: red;
        }
      }
    }
  }
}
</style>